<template>
  <div>
    <searchBox @searchChange="searchChange" />
      <div class="gva-table-box">
        <lineChart ref="totalUser" :title="chartData.title" :legend="chartData.legend" :xAxis="chartData.xAxis" :series="chartData.series"> </lineChart>
      </div>
      <div class="gva-table-box">
      <div class="gva-btn-list"><el-text class="mx-1" size="large">详细数据</el-text></div>
          <el-table
          ref="multipleTable"
          style="width: 100%"
          tooltip-effect="dark"
          row-key="ID"
          :data="tableData"
          border
        >
        
          <el-table-column v-for="item in headList" :key="item.id"
            align="left"
            :label="item.label"
            :prop="item.prop"
          />
          <!-- <el-table-column
            align="left"
            label="新增"
            prop="8RgLwNR29Mifj87op6Eb_new_remain"
          />
          <el-table-column
            align="left"
            label="次留"
          > -->
          <!-- <template #default="scope">
            <span v-if="scope.row.time_remain != 0">
              {{ scope.row.time_remain +'  ('+(scope.row.time_remain/scope.row.total * 100).toFixed(2)+'%)' }}
            </span>
            <span v-else>
              -
            </span>
          </template> -->
          <!-- </el-table-column> -->
  
        </el-table>
      </div>
  </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue'
  import lineChart from '../../components/echarts/lineChart.vue';
  import searchBox from '../../components/search/searchBox.vue';
  import type { TabsPaneContext } from 'element-plus';
  import { useRouter, useRoute } from 'vue-router'
  import { sumByKey } from '../../utils/fmtData'
  import {
          getHugeList
  } from '@/api/openApi'
  
  
  // =========== 表格控制部分 ===========
  const tableData = ref([])
  const searchInfo = ref({})
  
  const route = useRoute()
  const plan_id = route.query.id
  
  var searchChange = function(date) {
    searchInfo.value = date
    getTableData()
  }
  
  
  
  const chartData = ref({
    xAxis: [],
    series: [],
    legend: [],
    title: 'IPU统计'
  })
  
  const headList = ref([])
  const chartList = ref([])
  const getTableData = async() => {
  
    const table = await getHugeList({ type:"cronAbTestData",...searchInfo.value,params:"3",add_params:plan_id })
    if (table.code == 0) {
      let arr = []
      if (table.data.result.length > 0) {
        headList.value = table.data.result
        headList.value.forEach((it,index)=>{
          if (index >= 1 && it.label.indexOf('新增') != -1){
            chartList.value.push(it.prop)
            chartData.value.legend.push(it.label)
            chartData.value.series.push({
              name: it.label,
              type: 'line',
              data: []
            })
          }
        })
      }
      chartData.value.xAxis = []
      if(table.data.list.length > 0){
        table.data.list.sort((a, b) => new Date(a.date) - new Date(b.date));
        table.data.list.forEach((item,index)=>{
          let result = JSON.parse(item.response)
          chartData.value.xAxis.push(result.date)
          chartList.value.forEach((its,indexs)=>{
            chartData.value.series[indexs].data.push(result[its])
          })
          arr.push({
            date: item.date,
            ...result
          })
        })
        arr = sumByKey(arr,'date')
        tableData.value = arr
      }else{
        tableData.value = []
      }
     
    }
  }
  
  
  </script>